{namespace dkpoints.ui.templates.RaidMemberList}


/**
 * @param raidMembers An array of raiders to be added to the initial list.
 * @param editable Show editing controls?
 * @param parentID The ID of the RaidMemberList component.
 * @param 
 */
{template .render}
<h3 class="{css raid_members_head"}>Raid Members</h3>
<div class="{css raid_members}">
  {foreach $raider in $raidMembers}
    {call .newRaider}
      {param playerName: $raider.playerName /}
      {param playerClass: $raider.playerClass /}
      {param number: index($raider) + 1 /}
      {param editable: $editable /}
      {param parentID: $parentID /}
    {/call}
  {/foreach}
  {if $editable}
    {call .addRaider}
      {param parentID: $parentID /}
    {/call}
  {/if}
</div>
<div class="{css member_list_options} {if $editable}{css member_list_options_extrawide}{/if}">
  <div>Click player names to inspect</div>
  {if $editable}<div>Drag player names to "Looted By" fields</div>{/if}
</div>
{/template}


/**
 * Generate a raid member div.
 * @param playerName The player object.
 * @param playerClass The player's class.
 *    Must be the result of a goog.getCssName call.
 * @param number The player's position in the list.
 * @param editable Show editing controls.
 * @param parentID The parent's ID added to the remove button's ID.
 */
{template .newRaider}
<div class="{css raid_member}">
  <div class="{css playername} {if $editable}{css editable_playername}{/if} {$playerClass}">
    {$number}. <a href="/#/raider/{$playerName}/" {if $editable}target="_blank"{/if} class="{css playerlink} {$playerClass}">{$playerName}</a>
  </div>
  {if $editable}
    <div class="{css member_option}">
        <div id="{$parentID|id}.rmv{$playerName|id}" class="{css goog-inline-block} {css goog-imageless-button}"> - </div>
    </div>
  {/if}
</div>
{/template}


/**
 * DOM structure for the add a player button at the bottom of the raid menber list.
 * @param parentID The parent's ID.
 */
{template .addRaider}
<div class="{css raid_member}">
  <div class="{css playername} {css editable_playername}">
    <input id="{$parentID|id}.new_raider" class="{css add_player_input}" name="new_raider" type="text" size="25em" />
  </div>
  <div class="{css member_option}">
    <div id="{$parentID|id}.addBtn" class="{css remove_player_button} {css goog-inline-block} {css goog-imageless-button}"> + </button>
  </div>
</div>
{/template}
